<template>
  <div>
    <van-skeleton title avatar :row="5" :loading="loading">
      <div id="comment">
        <van-divider content-position="left">热门评论</van-divider>
        <div class="hot">
          <div class="commentitem" v-for="item in hotComments" :key="item.commentId">
            <div class="left">
              <img v-lazy="item.user.avatarUrl" alt />
            </div>
            <div class="right">
              <span class="nickname" v-text="item.user.nickname+'：'"></span>
              <span class="content" v-text="item.content"></span>
              <div class="bottom">
                <div class="date">
                  <span v-text="setNowTimes(item.time)"></span>
                </div>
                <div class="button" @click="like($event,item.likedCount,item.liked,item.commentId)">
                  <van-icon name="good-job" />
                  <span v-text="item.likedCount"></span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <van-divider content-position="left">评论</van-divider>
        <div class="comments">
          <div class="commentitem" v-for="item in comments" :key="item.commentId">
            <div class="left">
              <img v-lazy="item.user.avatarUrl" alt />
            </div>
            <div class="right">
              <span class="nickname" v-text="item.user.nickname+'：'"></span>
              <span class="content" v-text="item.content"></span>
              <div class="bottom">
                <div class="date">
                  <span v-text="setNowTimes(item.time)"></span>
                </div>
                <div class="button" @click="like($event,item.likedCount,item.liked,item.commentId)">
                  <van-icon name="good-job" />
                  <span v-text="item.likedCount"></span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 分页 -->
        <div class="page">
          <van-pagination
            v-model="currentPage"
            :total-items="total_item"
            :items-per-page="30"
            :show-page-size="4"
            force-ellipses
            @change="changePage"
          />
        </div>
      </div>
    </van-skeleton>
    <van-skeleton title avatar :row="5" :loading="loading" />
    <van-skeleton title avatar :row="5" :loading="loading" />
    <van-skeleton title avatar :row="5" :loading="loading" />
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      // 分页控制
      id: "",
      limit: "20",
      currentPage: 1,
      total_item: "",
      //热门评论
      hotComments: [],
      //评论
      comments: [],
      loading: true
    };
  },
  created() {
    //   获取传来的id
    this.id = this.$route.params.id;
    //获取评论
    this.$http
      .get(
        "comment/music?id=" +
          this.id +
          "&limit=" +
          this.limit +
          "&cookie=" +
          localStorage.getItem("cookie")
      )
      .then(result => {
        console.log(result);
        this.hotComments = result.body.hotComments;
        this.comments = result.body.comments;
        this.total_item = result.body.total;
        // 加载完毕
        this.loading = false;
      });
  },
  methods: {
    //时间格式化
    setNowTimes(time) {
      let myDate = new Date(time);
      // console.log(myDate)
      let yy = String(myDate.getFullYear());
      let mm = myDate.getMonth() + 1;
      let dd = String(
        myDate.getDate() < 10 ? "0" + myDate.getDate() : myDate.getDate()
      );
      let nowDate = yy + "年" + mm + "月" + dd + "日";
      return nowDate;
    },
    // 点赞
    like(event, count, flag, id) {
      let color = "black";
      if (flag == false) {
        count++;
        color = "blue";
        this.$http
          .get(
            "comment/like?id=" +
              this.id +
              "&cid=" +
              id +
              "&type=0&t=1&cookie=" +
              localStorage.getItem("cookie")
          )
          .then(result => {
            console.log(result);
          });
      } else if (flag == true) {
        count--;
        color = "black";
        this.$http
          .get(
            "comment/like?id=" +
              this.id +
              "&cid=" +
              id +
              "&type=0&t=0&cookie=" +
              localStorage.getItem("cookie")
          )
          .then(result => {
            console.log(result);
          });
      }
      event.currentTarget.style.color = color;
      event.currentTarget.children[1].innerText = count;
    },

    // 分页
    changePage() {
      // 回到开头
      window.scrollTo(0, 0);
      //获取评论
      this.$http
        .get(
          "comment/music?id=" +
            this.id +
            "&limit=" +
            this.limit +
            "&offset=" +
            (this.currentPage - 1) * this.limit +
            "&cookie=" +
            localStorage.getItem("cookie")
        )
        .then(result => {
          console.log(result);
          this.comments = result.body.comments;
          this.total_item = result.body.total;
        });
    }
  }
};
</script>

<style lang="scss">
#comment {
  .hot,
  .comments {
    .commentitem {
      display: flex;
      width: 100%;
      padding: 5%;
      .left {
        width: 20%;
        img {
          width: 80%;
          border-radius: 100%;
        }
      }
      .right {
        display: flex;
        flex-direction: column;
        width: 80%;
        .nickname {
          font-size: 12px;
          color: rgb(37, 95, 121);
        }
        .content {
          font-size: 12px;
        }
        .bottom {
          margin-top: 5%;
          display: flex;
          justify-content: space-between;
          .date {
            color: rgb(128, 152, 163);
            font-size: 8px;
          }
          .button {
            font-size: 8px;
          }
        }
      }
    }
  }
  .page {
    margin-bottom: 20%;
  }
}
</style>